<template>
  <div class="teacher">
    <div class="teacher-header">
      <div class="title">{{ datas.form.title }}</div>
      <div class="more">更多<i class="el-icon-arrow-right right"></i></div>
    </div>

    <!-- 列表 -->
    <div v-if="datas.form.arrange_type == 1" class="teacher-body teacher-list">
      <div v-for="(item, index) in datas.mock_source" :key="index" class="item">
        <el-image class="image" :src="item.avatar_url">
          <div slot="error" class="image-error">
            <img
              class="image-error__icon"
              src="@/assets/images/template/h5/placeholder_medium.png"
            />
          </div>
        </el-image>
        <div class="desc">
          <div class="title">
            {{ item.teacher_name
            }}<span class="grade">/{{ item.level_text }}</span>
          </div>
          <div class="info">{{ item.intro }}</div>
        </div>
      </div>
    </div>

    <!-- 宫格 -->
    <div
      v-else-if="datas.form.arrange_type == 2"
      class="teacher-body teacher-grid"
    >
      <div v-for="(item, index) in datas.mock_source" :key="index" class="item">
        <el-image class="image" :src="item.avatar_url">
          <div slot="error" class="image-error">
            <img
              class="image-error__icon"
              src="@/assets/images/template/h5/placeholder_medium.png"
            />
          </div>
        </el-image>
        <div class="desc">
          <div class="title">
            {{ item.teacher_name
            }}<span class="grade">/{{ item.level_text }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 滚动 -->
    <div
      v-else-if="datas.form.arrange_type == 3"
      class="teacher-body teacher-scroll"
    >
      <el-scrollbar>
        <div class="list">
          <div
            v-for="(item, index) in datas.mock_source"
            :key="index"
            class="item"
          >
            <el-image class="image" :src="item.avatar_url">
              <div slot="error" class="image-error">
                <img
                  class="image-error__icon"
                  src="@/assets/images/template/h5/placeholder_medium.png"
                />
              </div>
            </el-image>
            <div class="desc">
              <div class="title">
                {{ item.teacher_name
                }}<span v-if="item.level_text" class="grade">/{{ item.level_text }}</span>
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>

    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>

<script>
export default {
  name: 'Teacher',
  props: {
    datas: {
      type: Object,
      default: () => {}
    },
    isDroping: {
      type: Boolean,
      required: true
    }
  },
  watch: {
    'datas.form.source_index': {
      handler() {
        this.loadBatchInfo()
      }
    }
  },
  created() {
    if (this.isDroping === false) {
      this.loadBatchInfo()
    }
  },
  methods: {
    loadBatchInfo() {
      let sourceList = []
      if (this.datas.form.source === 0) {
        const ids = this.datas.form.source_list.map(item => item.value)
        if (ids.length > 0) {
          this.$http.get(
            '/user/admin/teacher/batch/info',
            {
              ids: ids
            },
            ({ data }) => {
              this.datas.form.source_list.forEach(item => {
                const info = data.find(i => i.value === item.value)
                sourceList.push({
                  id: info.value,
                  teacher_name: info.teacher_name,
                  level_text: info.level_text,
                  intro: info.signature,
                  avatar_url: info.avatar_url
                })
              })
            },
            _ => {}
          )
        }
      } else {
        sourceList = this.getMockData()
      }

      this.$set(this.datas, 'mock_source', sourceList)
    },
    // 讲师模拟数据
    getMockData() {
      const mockData = []
      const teacher = {
        teacher_name: '讲师姓名',
        level_text: '高级讲师',
        intro: '名师出高徒',
        avatar_url: ''
      }
      for (let i = 0; i < this.datas.form.number; i++) {
        const item = { ...teacher }
        item.avatar_url = require('@/assets/images/template/teacher_' +
          ((i % 4) + 1) +
          '.png')
        mockData.push(item)
      }

      return mockData
    }
  }
}
</script>

<style scoped lang="scss">
.teacher {
  padding: 14px 15px;
  background: #ffffff;
  position: relative;
  &-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .title {
      font-size: 17px;
      font-weight: 500;
      color: #303133;
      line-height: 24px;
    }
    .more {
      font-size: 12px;
      font-weight: 400;
      color: #888888;
      line-height: 16px;
    }
  }
  &-body {
    margin-top: 15px;
    .item {
      min-width: 0;
      .image {
        display: block;
      }
      ::v-deep.image-error {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        background-color: #f1f1f1;
        border-radius: 8px;
        .image-error__icon {
          width: 40px;
          height: 28px;
        }
      }
      .title {
        font-size: 14px;
        font-weight: 500;
        color: #333333;
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .grade {
        font-size: 12px;
        color: #888888;
      }
      .info {
        font-size: 12px;
        font-weight: 400;
        color: #909399;
        line-height: 16px;
      }
    }
  }
  &-list {
    .item {
      padding: 10px;
      display: flex;
      background: #ffffff;
      box-shadow: 0px 0px 20px 0px rgba(48, 49, 51, 0.06);
      border-radius: 10px;
      .image {
        width: 90px;
        height: 90px;
      }
      .desc {
        flex: 1;
        min-width: 0;
        margin-left: 10px;
      }
      .info {
        margin-top: 10px;
      }
    }
    .item + .item {
      margin-top: 10px;
    }
  }
  &-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 14px 10px;
    .item {
      padding: 6px;
      background: #ffffff;
      box-shadow: 0px 0px 20px 0px rgba(48, 49, 51, 0.06);
      border-radius: 10px;
      .image {
        width: 100%;
        height: 155px;
      }
      .desc {
        margin-top: 8px;
      }
      .title {
        text-align: center;
      }
    }
  }
  &-scroll {
    ::v-deep.el-scrollbar {
      width: 100%;
      padding-bottom: 15px;
    }
    ::v-deep.el-scrollbar__wrap {
      width: 100%;
      overflow-y: hidden;
      overflow-x: auto;
    }
    ::v-deep.el-scrollbar__view {
      width: 100%;
    }
    .list {
      display: flex;
    }
    .item {
      flex: none;
      width: 155px;
      padding: 6px;
      background: #ffffff;
      box-shadow: 0px 0px 20px 0px rgba(48, 49, 51, 0.06);
      border-radius: 10px;
      .image {
        width: 100%;
        height: 155px;
      }
      .desc {
        margin-top: 8px;
      }
      .title {
        text-align: center;
      }
    }
    .item + .item {
      margin-left: 10px;
    }
  }
}
</style>
